<template>
	<view :style="{ height: headerHeight }" class="header">
		<view class="left" @click="onBack">
			返回
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Header',
		props: {
			title: {
				type: String,
				default: '标题'
			},
			targetPage: {
				type: String,
				default: ''
			},
			index:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				headerHeight: '44px' ,// 默认高度,
				paddingTop:'0px'
			};
		},
		mounted() {
			this.calculateHeaderHeight();
		},
		methods: {
			calculateHeaderHeight() {
				let systemInfo = uni.getSystemInfoSync();
				let statusBarHeight = systemInfo.statusBarHeight || 0;
				let headerHeight = 40 + statusBarHeight; // 假设默认的顶部栏高度是44px，添加安全区域的高度
				this.headerHeight = `${headerHeight}px`;
				this.paddingTop = `${statusBarHeight + 20}px`;
			},
			onBack() {
				uni.navigateBack()
				// if (this.index == '1') {
				// 	uni.switchTab({
				// 		url: this.targetPage
				// 	});
				// } else {
				// 	uni.navigateBack()
				// 	uni.navigateBack()
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 0 30px;
		background-color: #007AFF;
		color: white;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		.left {
			
			padding-bottom: 10px;
		}


		.title {
			flex: 1;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
		}
	}
</style>